<template>
	<!--主体-->
	<view class="previewImage">
		<!--左右滑动-->
		<swiper class="swiper">
			<swiper-item key="0">
				<!--移动+缩放-->
				<movable-area class="marea" scale-area>
					<movable-view class="mview" direction="all" scale="true" @scale="onScale" scale-min="0.5" scale-max="4" :scale-value="scale">
						<!--图片展示-->
						<image class="image" src="../../static/a.jpg" mode="widthFix" />
					</movable-view>
				</movable-area>
			</swiper-item>
			<swiper-item key="1">
					<movable-area class="marea" scale-area>
						<movable-view class="mview" direction="all" scale="true" @scale="onScale" scale-min="0.1" scale-max="4" :scale-value="scale">
							<image class="image" src="../../static/e.png" mode="widthFix" />
						</movable-view>
					</movable-area>
				</swiper-item>
			</swiper>
		</swiper>
		<!--页码-->
		<view class="page"><text class="text">1/1</text></view>
		
		<!--保存-->
		<view class="save"><text class="text">保存</text></view>
		
		<!--旋转-->
		<view class="rotate"><text class="text">旋转</text></view>
		
		<!--描述-->
		<view class="desc">山城重庆-人民大会堂-地址：渝中区哔哔哔哔哔哔哔哔哔--很长</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scale: 1,
			old: {
				scale: 1
			}
		};
	},

	methods: {
		onScale(e) {
			this.old.scale = e.detail.scale;
		},
		open(current) {
			this.src = current;
			this.showBox = true;
		},
		close() {
			this.showBox = false;
		}
	}
};
</script>

<!--使用scss,只在本组件生效-->
<style lang="scss" scoped>
.previewImage {
	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	user-select: none;
	.swiper {
		width: 100%;
		height: 100%;
		.marea {
			height: 100%;
			width: 100%;
			position: fixed;
			overflow: hidden;
			.mview {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: auto;
				min-height: 100%;
				.image {
					width: 100%;
				}
			}
		}
	}


	.page {
		position: absolute;
		width: 100%;
		bottom: 20rpx;
		text-align: center;
		.text {
			color: #fff;
			font-size: 26rpx;
			background-color: rgba(0, 0, 0, 0.5);
			padding: 3rpx 16rpx;
			border-radius: 20rpx;
			user-select: none;
		}
	}
	.save {
		position: absolute;
		left: 10rpx;
		width: 120rpx;
		height: 56rpx;
		bottom: 10rpx;
		text-align: center;
		padding: 10rpx;
		.text {
			background-color: rgba(0, 0, 0, 0.5);
			color: #fff;
			font-size: 30rpx;
			border-radius: 20rpx;
			border: 1rpx solid #f1f1f1;
			padding: 6rpx 22rpx;
			user-select: none;
		}
		.text:active {
			background-color: rgba(100, 100, 100, 0.5);
		}
	}
	.rotate {
		position: absolute;
		right: 10rpx;
		width: 120rpx;
		height: 56rpx;
		bottom: 10rpx;
		text-align: center;
		padding: 10rpx;
		.text {
			background-color: rgba(0, 0, 0, 0.5);
			color: #fff;
			font-size: 30rpx;
			border-radius: 20rpx;
			border: 1rpx solid #f1f1f1;
			padding: 6rpx 22rpx;
			user-select: none;
		}
		.text:active {
			background-color: rgba(100, 100, 100, 0.5);
		}
	}
	.desc {
		position: absolute;
		top: 0;
		width: 100%;
		padding: 5rpx 10rpx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 28rpx;
		letter-spacing: 3rpx;
		user-select: none;
	}
}
</style>
